<template>
  <div class="gantt-container">
    <div class="gantt-header">
      <div class="gantt-header-left">项目/任务</div>
      <div class="gantt-header-right">
        <div v-for="(month, index) in ganttMonths" :key="index" class="gantt-month">
          {{ month.name }}
          <div class="gantt-days">
            <div v-for="day in month.days" :key="day" class="gantt-day">{{ day }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="gantt-body">
      <div v-for="project in projects" :key="project.id" class="gantt-row">
        <div class="gantt-row-left">{{ project.name }}</div>
        <div class="gantt-row-right">
          <div class="gantt-bar-container">
            <div 
              class="gantt-bar" 
              :style="getGanttBarStyle(project)"
              :class="'status-' + project.status"
              @click="$emit('project-click', project)"
            >
              <span class="gantt-bar-label">{{ project.progress }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  projects: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['project-click'])

// 甘特图月份计算
const ganttMonths = computed(() => {
  // 获取所有项目的最早开始日期和最晚结束日期
  let minDate = new Date();
  let maxDate = new Date();
  
  if (props.projects.length > 0) {
    minDate = new Date(Math.min(...props.projects.map(p => new Date(p.startDate).getTime())));
    maxDate = new Date(Math.max(...props.projects.map(p => new Date(p.endDate).getTime())));
  }
  
  // 确保至少显示3个月
  const threeMonthsLater = new Date(minDate);
  threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 2);
  if (maxDate < threeMonthsLater) {
    maxDate = threeMonthsLater;
  }
  
  // 生成月份数据
  const months = [];
  const currentDate = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
  
  while (currentDate <= maxDate) {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();
    const monthName = new Date(year, month, 1).toLocaleString('zh-CN', { month: 'short' }) + ' ' + year;
    
    // 获取当月天数
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
    
    months.push({
      name: monthName,
      days: days,
      startDate: new Date(year, month, 1),
      endDate: new Date(year, month, daysInMonth)
    });
    
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
  
  return months;
});

// 计算甘特图条形的样式
const getGanttBarStyle = (project) => {
  // 获取项目开始和结束日期
  const startDate = new Date(project.startDate);
  const endDate = new Date(project.endDate);
  
  // 获取甘特图的总时间范围
  const ganttStartDate = ganttMonths.value[0].startDate;
  const ganttEndDate = ganttMonths.value[ganttMonths.value.length - 1].endDate;
  
  // 计算总天数
  const totalDays = (ganttEndDate - ganttStartDate) / (1000 * 60 * 60 * 24);
  
  // 计算项目开始位置（百分比）
  const startOffset = Math.max(0, (startDate - ganttStartDate) / (1000 * 60 * 60 * 24)) / totalDays * 100;
  
  // 计算项目持续时间（百分比）
  const duration = Math.min(
    (endDate - startDate) / (1000 * 60 * 60 * 24),
    (ganttEndDate - startDate) / (1000 * 60 * 60 * 24)
  ) / totalDays * 100;
  
  return {
    left: startOffset + '%',
    width: duration + '%'
  };
};
</script>

<style scoped>
.gantt-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.gantt-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  position: sticky;
  top: 0;
  z-index: 1;
}

.gantt-header-left {
  min-width: 200px;
  padding: 12px;
  font-weight: bold;
  border-right: 1px solid #ebeef5;
}

.gantt-header-right {
  display: flex;
  flex-grow: 1;
  min-width: 800px;
}

.gantt-month {
  flex-grow: 1;
  text-align: center;
  padding: 8px 0;
  font-weight: bold;
  border-right: 1px solid #ebeef5;
}

.gantt-days {
  display: flex;
  border-top: 1px solid #ebeef5;
}

.gantt-day {
  flex: 1;
  text-align: center;
  font-size: 12px;
  padding: 4px 0;
  border-right: 1px solid #f0f0f0;
}

.gantt-body {
  position: relative;
}

.gantt-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.gantt-row-left {
  min-width: 200px;
  padding: 12px;
  border-right: 1px solid #ebeef5;
  display: flex;
  align-items: center;
}

.gantt-row-right {
  flex-grow: 1;
  min-width: 800px;
  position: relative;
}

.gantt-bar-container {
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
}

.gantt-bar {
  position: absolute;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.gantt-bar:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.gantt-bar.status-pending {
  background-color: #909399;
}

.gantt-bar.status-in-progress {
  background-color: #409EFF;
}

.gantt-bar.status-completed {
  background-color: #67C23A;
}

.gantt-bar.status-paused {
  background-color: #E6A23C;
}

.gantt-bar-label {
  white-space: nowrap;
}
</style> 